<script setup lang="ts">
import { getInstanceList } from '@/api/docker';
import { Instance } from '@/api/docker/type';
import { Numeric } from 'vant/lib/utils';
import { onMounted, ref, Ref } from 'vue';

const show = ref(false);
const instance = defineModel() as Ref<Instance>;
const instanceList = ref([] as Instance[]);
const pickerValue = ref<Numeric[]>([]);
const columns = ref([] as {
    text: string, value: string
}[]);

onMounted(() => {
    getInstanceList().then((res) => {
        instanceList.value = res.data;
        instanceList.value.forEach((item, index) => {
            columns.value.push({text: item.name, value: index.toString()})
        })
    })
})
const onConfirm = (data : { selectedValues: number, selectedOptions: string}) => {
    show.value = false;
    instance.value = instanceList.value[data.selectedValues];
}
</script>

<template>
    <div>
        <van-field
            v-model="instance.name"
            is-link
            readonly
            label="实例"
            placeholder="请选择实例"
            @click="show = true"
            :rules="[{ required: true, message: '请选择实例' }]"
        />
        <van-popup v-model:show="show" destroy-on-close round position="bottom">
            <van-picker
                :model-value="pickerValue"
                :columns="columns"
                @cancel="show = false"
                @confirm="onConfirm"
            />
        </van-popup>
    </div>
</template>

<style lang="scss" scoped>

</style>